<script setup lang="ts">
import { useVModel } from '@vueuse/core';
import DeptSelect from '@/components/DeptSelect/index.vue';
import { DeptVO } from '@/api/system/dept/types';

const props = defineProps<{
  modelValue?: string | number;
  name?: string;
}>();
const emit = defineEmits(['update:modelValue', 'update:name']);
const data = useVModel(props, 'modelValue', emit);
const name = useVModel(props, 'name', emit);

const deptSelectRef = ref<InstanceType<typeof DeptSelect>>();

const open = () => {
  deptSelectRef.value.open();
};

const callBack = (dept?: DeptVO[]) => {
  if (!dept || dept.length === 0) {
    return;
  }
  data.value = dept[0].deptId;
  name.value = dept[0].deptName;
};

const _name = computed({
  get() {
    return name.value;
  },
  set(_) {}
});

const clearName = () => {
  if (data.value) {
    data.value = '';
    name.value = '';
  }
};
</script>

<template>
  <el-input v-bind="$attrs" v-model="name" readonly @click="open">
    <template #append>
      <div style="cursor: pointer" @click="clearName">清空</div>
    </template>
  </el-input>
  <dept-select ref="deptSelectRef" :multiple="false" @confirm-call-back="callBack"></dept-select>
</template>

<style scoped lang="scss"></style>
